<template>
  <div class="shop">
    <div class="shopCom flex-md">
      <div class="shopSin" v-for="(item,index) in flowList" :key="index" @click="getShop(item.id)">
        <div>
          <el-image :src="item.shopUrl" style="width: 100%;height: 250px"></el-image>
        </div>
        <div class="shopText">
          <span>
            {{item.title}}
          </span>
        </div>
        <div class="shopPrice">
          <span class="price1">￥</span>
          <span class="price2">{{item.price}}</span>
          <span class="price3">￥{{item.original}}</span>
        </div>
        <div class="shopType">
          <el-tag type="danger">{{item.lity.listType}}成新</el-tag>
        </div>
        <div class="shopLook">浏览：{{item.shopLook}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    flowList: {
      type: Array,
    }
  },
  name: 'Shop',
  data() {
    return{
      src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
    }
  },
  methods: {
    getShop(index){
      this.$emit('shopIdClick',index)
    }
  }
};
</script>

<style lang="less" scoped>
.shop{
  .shopCom{
    padding: 0 200px;
    flex-wrap: wrap;
    .shopSin:hover{
      box-shadow: 2px 5px 5px #dddddd;
    }
    .shopSin{
      padding: 15px;
      margin: 10px 5px;
      width: 17%;
      border: 1px solid #dddddd;
      border-radius: 8px;
      .shopText{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #9b9b9b;
        line-height: 20px;
        padding-top: 10px;
      }
      .shopPrice{
        font-size: 12px;
        margin-top: 5px;
        .price1{
          vertical-align: baseline;
          font-family: PingFangSC-Medium;
          font-size: 18px;
          color: #fd3f31;
        }
        .price2{
          margin-left: 4px;
          vertical-align: baseline;
          text-align: left;
          line-height: 25px;
          font-family: PingFangSC-Medium;
          font-size: 18px;
          color: #fd3f31;
        }
        .price3{
          margin-left: 8px;
          vertical-align: baseline;
          text-decoration: line-through;
          line-height: 20px;
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #9b9b9b;
        }
      }
      .shopType{
        margin-top: 5px;
        padding-bottom: 15px;
        border-bottom: 1px #dddddd solid;
      }
      .shopLook{
        margin-top: 5px;
        padding-top: 5px;
        color: #9b9b9b;
        font-size: 12px;
        line-height: 17px;
        background: #fff;
        float: right;
      }
    }
  }
}
</style>
